<template>
  <div class="filter">
    <el-row class="header">
      <span class="title-medium text-importent">影像资料</span>
    </el-row>
    <el-row class="item">
      <el-col :span="22" :offset="1" v-if="tempdicomFilesList === 0">暂无</el-col>
      <el-col :span="22" :offset="1" v-else>
        <el-row v-for="(file, index) in tempdicomFilesList" :key="index" class="item">
          <el-row :span="10">
            <a target="_blank" :href="file.url"> {{ file.url }}</a>
          </el-row>
        </el-row>
      </el-col>
    </el-row>
    <el-row class="header">
      <span class="title-medium text-importent">其他资料</span>
    </el-row>
    <div>
      <el-row class="header" style="display: flex; justify-content: center">
        <el-col :span="13" style="margin: 20px" scoped>
          <el-card :body-style="{ padding: '20px' }">
            <div slot="header" class="clearfix">
              <span>病理报告</span>
            </div>
            <el-row>
              <div :images="pathReposList">
                <img
                  v-for="(pic, index) in pathReposList"
                  :key="index"
                  :src="pic.url"
                  class="image"
                />
              </div>
            </el-row>
            <span> {{ orders.pathReposName }}</span>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <div>
      <el-row class="header" style="display: flex; justify-content: center">
        <el-col :span="13" style="margin: 20px" scoped>
          <el-card :body-style="{ padding: '20px' }">
            <div slot="header" class="clearfix">
              <span>手术记录</span>
            </div>
            <el-row>
              <div :images="surgeryReposList">
                <img
                  v-for="(pic, index) in surgeryReposList"
                  :key="index"
                  :src="pic.url"
                  class="image"
                />
              </div>
            </el-row>
            <span> {{ orders.surgeryReposName }}</span>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <div>
      <el-row class="header" style="display: flex; justify-content: center">
        <el-col :span="13" style="margin: 20px" scoped>
          <el-card :body-style="{ padding: '20px' }">
            <div slot="header" class="clearfix">
              <span>出院记录</span>
            </div>
            <el-row>
              <div :images="outReposList">
                <img
                  v-for="(pic, index) in outReposList"
                  :key="index"
                  :src="pic.url"
                  class="image"
                />
              </div>
            </el-row>
            <span> {{ orders.outReposName }}</span>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <div>
      <el-row class="header" style="display: flex; justify-content: center">
        <el-col :span="13" style="margin: 20px" scoped>
          <el-card :body-style="{ padding: '20px' }">
            <div slot="header" class="clearfix">
              <span>病史资料</span>
            </div>
            <el-row>
              <div :images="historyReposList">
                <img
                  v-for="(pic, index) in historyReposList"
                  :key="index"
                  :src="pic.url"
                  class="image"
                />
              </div>
            </el-row>
            <span> {{ orders.historyReposName }}</span>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: 'consultationAttachmentView',
  props: ['orders'],
  data() {
    return {
      imageServiceURL: process.env.VUE_APP_ImageServiceURL,
      dicomServiceURL: process.env.VUE_APP_dicomServiceURL // 影像解析
    }
  },
  created() {},
  methods: {},
  computed: {
    // 影像
    tempdicomFilesList() {
      const fileList = []
      this.orders.attachment.forEach(item => {
        if (item.type === 1) {
          const urlList = item.url.split('|')
          urlList.slice(0, urlList.length - 1).forEach(uri => {
            fileList.push({ name: '影像资料', url: `${this.dicomServiceURL}${uri}` })
          })
        }
      })
      return fileList
    },
    // 病理报告
    pathReposList() {
      const fileList = []
      this.orders.attachment.forEach(item => {
        if (item.type === 2) {
          const urlList = item.url.split('|')
          urlList.slice(0, urlList.length - 1).forEach(uri => {
            fileList.push({ name: '病理报告', url: this.imageServiceURL + uri })
          })
        }
      })
      return fileList
    },
    // 手术记录
    surgeryReposList() {
      const fileList = []
      this.orders.attachment.forEach(item => {
        if (item.type === 3) {
          const urlList = item.url.split('|')
          urlList.slice(0, urlList.length - 1).forEach(uri => {
            fileList.push({ name: '手术记录', url: this.imageServiceURL + uri })
          })
        }
      })
      return fileList
    },
    // 出院记录
    outReposList() {
      const fileList = []
      this.orders.attachment.forEach(item => {
        if (item.type === 4) {
          const urlList = item.url.split('|')
          urlList.slice(0, urlList.length - 1).forEach(uri => {
            fileList.push({ name: '出院记录', url: this.imageServiceURL + uri })
          })
        }
      })
      return fileList
    },
    // 病史资料
    historyReposList() {
      const fileList = []
      this.orders.attachment.forEach(item => {
        if (item.type === 5) {
          const urlList = item.url.split('|')
          urlList.slice(0, urlList.length - 1).forEach(uri => {
            fileList.push({ name: '病史资料', url: this.imageServiceURL + uri })
          })
        }
      })
      return fileList
    }
  }
}
</script>

<style scoped>
.filter {
  border-bottom: #f4f4f4 1px;

  padding: 10px 30px;

  background: #ffffff;

  font-size: 14px;
}

.image {
  height: 200px;

  width: 200px;

  margin: 15px;
}

.row-center {
  text-align: center;
}

.item {
  margin-top: 20px;
}

.header {
  margin-top: 20px;

  font-size: 14px;
}

.pathology-preview img {
  width: 146px;
  height: 146px;
}

.pathology-preview a,
.pathology-preview div {
  float: left;
}

.pathology-preview div.pathology-info {
  margin-left: 10px;
}
</style>
